<template>
	<!-- 加入购物车动画 -->
	<view
	v-if="joinObj.show"
	class="join-animate"
	:class="joinObj.animation ? 'join-animate-move' : ''">
		<image
		class="join-animate_image"
		:src="image" 
		mode="aspectFill"></image>
	</view>
</template>

<script lang="ts" setup>
	import {reactive} from 'vue'
	defineProps({
		image: {
			type: String,
			default: ''
		}
	})
	// 是否处于加入购物车状态
	let joinObj = reactive({
		show: false,
		animation: false
	})
	const start = ()=> {
		joinObj.show = true
		uni.showToast({
			title: '加入成功!'
		})
		setTimeout(()=> {
			joinObj.animation = true
			setTimeout(()=> {
				joinObj.show = false
				joinObj.animation = false
			},1500)
		},100)
	}
	defineExpose({
		start
	})
</script>

<style lang="scss" scoped>
	.join-animate {
		position: fixed;
		left: 350rpx;
		bottom: 300rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		overflow: hidden;
		opacity: 1;
		transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
		&_image {
			width: 100%;
			height: 100%;
		}
	}
	.join-animate-move {
		position: fixed;
		left: 60rpx;
		bottom: 60rpx;
		z-index: 999;
		opacity: 0;
		transform: scale(0.5);
	}
</style>